<template>
  <span class="w-full">
    <span v-if="!text || text === '0'">--</span>
    <template v-else>
      <span
        :class="`text-overflow-${line} ${line === 1 ? 'inline-block-bottom' : ''}`"
        :style="{ fontSize: size ? `${size}px` : '', color: color }"
      >
        <span v-if="showLeftTitle">{{ title }}：</span>

        <a-tooltip content="点击复制" position="tl" mini>
          <icon-copy
            class="mr-2 text2a82e4 cursor-pointer"
            v-if="text && text !== '0' && !no"
            @click="copyText(text)"
            :style="{ fontSize: size ? `${size}px` : '14px' }"
          />
        </a-tooltip>
        <a-tooltip :content="typeof text === 'string' ? text : text.toString()" v-bind="attrs" mini>
          <span class="text cursor-pointer" @click="jumpIt(text)">{{ text }}</span>
        </a-tooltip>
      </span>
    </template>
  </span>
</template>

<script setup>
import { getTargetUrl } from '@/apis'
/**
 * no:不提供复制，仅显示
 * text: 显示的文字
 * title: 文字含义，显示在左边
 * color：文字颜色
 * size：文字字号
 * line：溢出隐藏的行数 默认为2
 * showLeftTitle：是否显示左边的描述
 * jump：点击文字且文字是链接就跳转
 * link：jump为true且link不为空则点击跳转link
 * goodsId：goodsId存在且jump为true则转链后跳转出去
 */

defineOptions({ name: 'MsCopyDiv' })

import { copyText } from '@/utils/common'

const attrs = useAttrs()

const props = defineProps({
  text: {
    default: '',
    require: true,
    type: [String, Number]
  },
  no: {
    default: false,
    require: false,
    type: Boolean
  },
  title: {
    default: '',
    require: false,
    type: String
  },
  size: {
    require: false,
    type: Number
  },
  color: {
    default: 'var(--color-text-1)',
    require: false,
    type: String
  },
  line: {
    default: 2,
    require: false,
    type: Number
  },
  showLeftTitle: {
    default: false,
    require: false,
    type: Boolean
  },
  jump: {
    default: true,
    require: false,
    type: Boolean
  },
  goods: {
    default: undefined,
    require: false,
    type: Object
  },
  link: {
    require: false,
    type: String
  }
})

const jumpIt = (text) => {
  if (props.jump) {
    if (props.goods) {
      const { goodsId, sourceType, activityId } = props.goods
      getTargetUrl({ inviteCode: 5368240, goodsId, sourceType, activityId }).then((res) => {
        window.open(res.data.appUrl, '_blank')
      })
    } else if (props.link) {
      window.open(props.link, '_blank')
    } else if (/^https?:\/\//.test(text)) {
      window.open(text, '_blank')
    } else {
      if (props.no) return
      copyText(text)
    }
  } else {
    if (props.no) return
    copyText(text)
  }
}
</script>

<style scoped>
.text:hover {
  text-decoration: underline;
}
.max-w-full {
  max-width: 100%;
}
.inline-block-bottom {
  display: inline-block;
  vertical-align: bottom;
}
.text2a82e4 {
  color: #2a82e4;
}
</style>
